<template>
    <div>
        <h2>{{ counter }}</h2>
        <h2>counter*2:{{ DoubleCounter }}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        increment() {
            this.counter++
        },
        decrement() {
            this.counter--
        }
    },
    computed: {
        DoubleCounter() {
            return this.counter*2 
        }
    },
}
</script>

<style lang="scss" scoped>
</style>